Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Compact Chart
Troubleshooting
Glossary
Reference
JSFiddles

Registering your datasets with the Reference Data plugin

As noted in the Reference Data Tutorial, the Reference Data plugin is designed to use S&P Global data by default.

If you're using a reference data type not included in the plugin, additional steps are required to prepare it for your data.

Most customization in this tutorial will occur in the chartiq/examples/feeds/SPGIReferenceData.js file.

Registering Your Custom Dataset

The reference data registry initializes and stores the provided datasets, allowing a reference data quotefeed to match an incoming request to a dataset.

Any new dataset you implement must be registered with the reference data plugin.

// Registering the custom dataset on its own
const registry = new CIQ.ReferenceData.Registry([ CustomSeriesDataset ]);
// Registering the custom dataset with the existing datasets
const referenceData = new CIQ.ReferenceData.Registry([
  EPS,
  Surprise,
  ...Consensus.All,
  ...Guidance.All,
  ...IncomeStatement.All,
  CustomSeriesDataset, // Your Custom Dataset
  CustomMarkerDataset
]);

Creating a Dataset

Creating a Custom Dataset Displayed as a Series

Below is a simplified example of creating a dataset subclass that can be registered with the plugin. It displays the reference data as a series on the chart in its own panel.

A complete example can be found in SPGIReferenceData.js.

Note: Make sure you register your custom dataset as shown in the above section.

export class CustomSeriesDataset extends CIQ.ReferenceData.Dataset {
  constructor() {
    super();
    this.name = "Custom Dataset";
    this.categories = ["User", "Data"];
    this.description = "My Custom Dataset Shown As A Series on a separate panel";
  }

  getDefaultSeriesParams() {
    return {
      ...super.getDefaultSeriesParams(),
      panel: "Custom Panel Name"
    };
  }

  addToChart(stx, symbolIdentifier, seriesParams) {
    return this.addChartEngineSeries(stx, symbolIdentifier, seriesParams);
  }
}

Creating a Custom Dataset Displayed as a Marker: option 1

Here is another example to insert into your SPGIReferenceData.js file.

This class adds simulated "reference data" as a series on the main panel and places markers at each data point.


export class CustomMarkerDataset extends CIQ.ReferenceData.Dataset {
 constructor() {
  super();
  this.name = "Custom Dataset";
  this.categories = ["User", "Data"];
  this.description = "My Custom Dataset Shown As Series and Markers";
 }

 addToChart(stx, symbolIdentifier, params) {
  return new Promise((resolve, reject) => {
   const symbol = symbolIdentifier.toSymbolString(this);

   this.addChartEngineSeries(stx, symbolIdentifier, params)
    .then(() => {
     const symbolString = symbolIdentifier.toSymbolString(this);

     stx.chart.dataSet
      .filter((quote) => quote[symbolString])
      .forEach((quote) => {
       const entry = quote[symbolString];
       new CIQ.Marker({
        stx,
        symbolString,
        label: "test",
        xPositioner: "date",
        yPositioner: "bottom",
        panelName: "chart",
        x: entry.DT,
        node: new CIQ.Marker.Simple({
         type: "square",
         category: "news",
         headline: "...",
         story: "..."
        })
       });
      });

     resolve();
    })
    .catch((err) => {
     stx.removeSeries(symbol);
     reject(err);
    });
  });
 }
}

Creating a Custom Dataset Displayed as a Marker: option 2

This option uses the addChartEngineMarkers method, created for the reference data plugin. It returns a promise that resolves with the transformed API response data.

export class CustomMarkerDataset extends CIQ.ReferenceData.Dataset {
 constructor() {
  super();

  this.name = "Custom Dataset";
  this.categories = ["User", "Data"];
  this.description = "My Custom Dataset Shown As Series and Markers";
 }

 addToChart(stx, symbolIdentifier, params) {
  return new Promise((resolve, reject) => {
   const symbol = symbolIdentifier.toSymbolString(this);

   this.addChartEngineMarkers(stx, symbol, params)
    .then((allMarkers) => {
     allMarkers.forEach((event) => {
      const mparams = {
       stx,
       label: "...",
       xPositioner: "date",
       yPositioner: "above_candle",
       x: event.DT,
       node: new CIQ.Marker.Simple({
        headline: "...",
        category: "news",
        story: "...",
        glyph: "E",
        type: "circle"
       })
      };

      new CIQ.Marker(mparams);
     });

     resolve();
    })
    .catch(reject);
  });
 }
}

Create and Attach a Quotefeed

You will need to extend the built-in ReferenceData.QuoteFeed class to match quote feed requests with the corresponding datasets. Refer to the Reference Data Quotefeed tutorial for more details, including an example implementation.

Configure the Reference Data Plugin

Refer to the Plugin Configuration section of the main Reference Data tutorial for details on configuring the plugin.

Create a symbol lookup

Refer to the Reference Data Symbol Lookup for steps on how to implement a symbol lookup for your plugin.

Example file

We have a fully functioning example using the chartiq/examples/feeds/SPGIReferenceData.js file included in the library.

If you are using S&P Global provided reference data, follow the steps provided in the Reference Data Tutorial.